<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .upload-area {
            transition: all 0.3s ease;
        }
        .upload-area.dragover {
            background-color: rgba(59, 130, 246, 0.1);
            border-color: #3b82f6;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-12 max-w-3xl">
        <div class="bg-white rounded-xl shadow-lg p-8">
            <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">
                <i class="fa fa-cloud-upload mr-2 text-blue-500"></i>文件上传
            </h1>

            <div class="upload-area border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer mb-6"
                 id="uploadArea">
                <i class="fa fa-file-text-o text-5xl text-gray-400 mb-4"></i>
                <p class="text-gray-600 mb-2">点击或拖拽文件到此处上传</p>
                <p class="text-gray-400 text-sm">文件将保存到服务器根目录</p>
                <input type="file" id="fileInput" class="hidden" />
            </div>

            <div id="fileInfo" class="mb-6 hidden">
                <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                    <h3 class="font-semibold text-gray-800 mb-2">文件信息</h3>
                    <p class="text-gray-600"><span class="font-medium">文件名：</span><span id="fileName"></span></p>
                    <p class="text-gray-600"><span class="font-medium">大小：</span><span id="fileSize"></span></p>
                    <p class="text-gray-600"><span class="font-medium">类型：</span><span id="fileType"></span></p>
                </div>
            </div>

            <button id="uploadBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                <i class="fa fa-upload mr-2"></i>上传文件
            </button>

            <div id="statusMessage" class="mt-6 hidden"></div>
        </div>
    </div>

    <script>
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const fileInfo = document.getElementById('fileInfo');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        const fileType = document.getElementById('fileType');
        const uploadBtn = document.getElementById('uploadBtn');
        const statusMessage = document.getElementById('statusMessage');
        let selectedFile = null;

        // 点击上传区域触发文件选择
        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });

        // 处理文件选择
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                selectedFile = e.target.files[0];
                showFileInfo(selectedFile);
            }
        });

        // 拖拽功能
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');

            if (e.dataTransfer.files.length > 0) {
                selectedFile = e.dataTransfer.files[0];
                showFileInfo(selectedFile);
            }
        });

        // 显示文件信息
        function showFileInfo(file) {
            fileName.textContent = file.name;
            fileSize.textContent = (file.size / 1024).toFixed(2) + ' KB';
            fileType.textContent = file.type || '未知类型';

            fileInfo.classList.remove('hidden');
            uploadBtn.disabled = false;
        }

        // 上传文件
        uploadBtn.addEventListener('click', async () => {
            if (!selectedFile) return;

            const formData = new FormData();
            formData.append('file', selectedFile);

            try {
                uploadBtn.disabled = true;
                uploadBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>上传中...';

                const response = await fetch('/upload', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (result.success) {
                    showMessage('文件上传成功！已保存到服务器根目录', 'success');
                } else {
                    showMessage(result.message, 'error');
                }
            } catch (error) {
                showMessage('上传失败：' + error.message, 'error');
            } finally {
                uploadBtn.innerHTML = '<i class="fa fa-upload mr-2"></i>上传文件';
                uploadBtn.disabled = false;
            }
        });

        // 显示状态消息
        function showMessage(text, type) {
            statusMessage.textContent = text;
            statusMessage.className = 'mt-6 p-4 rounded-lg';

            if (type === 'success') {
                statusMessage.classList.add('bg-green-100', 'text-green-800', 'border', 'border-green-200');
            } else {
                statusMessage.classList.add('bg-red-100', 'text-red-800', 'border', 'border-red-200');
            }

            statusMessage.classList.remove('hidden');

            // 5秒后隐藏消息
            setTimeout(() => {
                statusMessage.classList.add('hidden');
            }, 5000);
        }
    </script>
</body>
</html>
